<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞翔的小鸟</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: skyblue;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        
        #bird {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,30 Q70,20 90,30 Q80,40 70,50 Q60,60 50,70 Q40,60 30,50 Q20,40 10,30 Q30,20 50,30" fill="yellow" stroke="black" stroke-width="2"/><circle cx="65" cy="35" r="5" fill="black"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            transition: transform 0.1s;
        }
        
        #ground {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            background-color: #8B4513;
        }
        
        #score {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
        
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
        }
        
        #start-button {
            padding: 10px 20px;
            font-size: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .pipe {
            position: absolute;
            width: 60px;
            background-color: #4CAF50;
            border: 2px solid #2E7D32;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">0</div>
        <div id="bird"></div>
        <div id="ground"></div>
        <div id="start-screen">
            <h1>飞翔的小鸟</h1>
            <p>点击屏幕让小鸟飞起来</p>
            <button id="start-button">开始游戏</button>
        </div>
    </div>

    <script>
        const bird = document.getElementById('bird');
        const gameContainer = document.getElementById('game-container');
        const scoreElement = document.getElementById('score');
        const startScreen = document.getElementById('start-screen');
        const startButton = document.getElementById('start-button');
        
        let birdY = 300;
        let birdVelocity = 0;
        let gravity = 0.5;
        let gameRunning = false;
        let score = 0;
        let pipes = [];
        let pipeTimer;
        let gameLoop;
        
        // 初始化小鸟位置
        bird.style.top = birdY + 'px';
        bird.style.left = '100px';
        
        // 开始游戏
        function startGame() {
            startScreen.style.display = 'none';
            gameRunning = true;
            birdY = 300;
            birdVelocity = 0;
            score = 0;
            scoreElement.textContent = score;
            pipes.forEach(pipe => pipe.element.remove());
            pipes = [];
            
            // 游戏主循环
            gameLoop = setInterval(updateGame, 20);
            
            // 生成管道
            pipeTimer = setInterval(createPipe, 2000);
        }
        
        // 更新游戏状态
        function updateGame() {
            // 更新小鸟位置
            birdVelocity += gravity;
            birdY += birdVelocity;
            bird.style.top = birdY + 'px';
            
            // 旋转小鸟角度
            bird.style.transform = `rotate(${birdVelocity * 2}deg)`;
            
            // 检查碰撞
            if (birdY <= 0 || birdY + 50 >= window.innerHeight - 20) {
                gameOver();
            }
            
            // 更新管道位置并检查碰撞
            pipes.forEach((pipe, index) => {
                pipe.x -= 3;
                pipe.element.style.left = pipe.x + 'px';
                
                // 检查小鸟是否通过管道
                if (pipe.x + 60 === 100 && !pipe.passed) {
                    pipe.passed = true;
                    score++;
                    scoreElement.textContent = score;
                }
                
                // 检查碰撞
                if (
                    (100 < pipe.x + 60 && 100 + 50 > pipe.x) &&
                    (birdY < pipe.topHeight || birdY + 50 > pipe.topHeight + pipe.gap)
                ) {
                    gameOver();
                }
                
                // 移除屏幕外的管道
                if (pipe.x + 60 < 0) {
                    pipe.element.remove();
                    pipes.splice(index, 1);
                }
            });
        }
        
        // 创建管道
        function createPipe() {
            const gap = 200;
            const topHeight = Math.random() * (window.innerHeight - gap - 100) + 50;
            
            const topPipe = document.createElement('div');
            topPipe.className = 'pipe';
            topPipe.style.height = topHeight + 'px';
            topPipe.style.top = '0';
            topPipe.style.left = window.innerWidth + 'px';
            
            const bottomPipe = document.createElement('div');
            bottomPipe.className = 'pipe';
            bottomPipe.style.height = (window.innerHeight - topHeight - gap - 20) + 'px';
            bottomPipe.style.bottom = '20px';
            bottomPipe.style.left = window.innerWidth + 'px';
            
            gameContainer.appendChild(topPipe);
            gameContainer.appendChild(bottomPipe);
            
            pipes.push({
                element: topPipe,
                x: window.innerWidth,
                topHeight: topHeight,
                gap: gap,
                passed: false
            });
            
            pipes.push({
                element: bottomPipe,
                x: window.innerWidth,
                topHeight: topHeight,
                gap: gap,
                passed: false
            });
        }
        
        // 游戏结束
        function gameOver() {
            clearInterval(gameLoop);
            clearInterval(pipeTimer);
            gameRunning = false;
            startScreen.style.display = 'flex';
            startScreen.querySelector('h1').textContent = '游戏结束';
            startScreen.querySelector('p').textContent = `你的得分: ${score}`;
            startButton.textContent = '再玩一次';
        }
        
        // 点击屏幕让小鸟飞起来
        gameContainer.addEventListener('click', function() {
            if (gameRunning) {
                birdVelocity = -10;
            }
        });
        
        // 开始按钮点击事件
        startButton.addEventListener('click', startGame);
    </script>
</body>
</html>